<template>
  <div style="background-color: #f3fcff">
    <!--    顶部 导航栏-->
    <van-nav-bar title="抢单"    @click-left="onClickLeft" left-text="" left-arrow></van-nav-bar>
    <van-divider style="background-color: black" />
    <!--    司机当前接单信息-->
    <van-cell is-link center>
      <div style="display: flex;" >
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.sumTime}}</div>
          <div style="text-align: center;">接单时长</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.sumNum}}</div>
          <div style="text-align: center;">接单数</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.onecePrice}}</div>
          <div style="text-align: center;">今日流水</div>
        </div>
      </div>
    </van-cell>
    <van-divider style="background-color: black" />


    <!--    热力图等三个功能跳转页面-->
    <van-cell>
      <div style="display: flex;">
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="fire-o" />
          <div style="text-align: center;" @click="toHeatMap">热力图</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="location-o" />
          <div style="text-align: center;" @click="gonearby">找附近</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="setting-o" />
          <div style="text-align: center;">偏好设置</div>
        </div>
      </div>
    </van-cell>
    <van-divider style="background-color: black" />

    <!--    显示实时订单页面-->
    <div>
      <van-cell>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template icon>
          <van-icon name="bullhorn-o" class="bullhorn-o" /><span style="font-size: 18px">实时单</span>
        </template>
      </van-cell>
      <van-divider style="background-color: black; margin: 0 auto; width: 80%;margin-bottom: 20px"></van-divider>
      <!--      用来装实时订单里面的两个div-->
      <div>
        <div class="theOrderInderBoxFirst container">
          <div class="radioBox"></div>
          <p>{{orderItem.startingPointAddress}}</p>
        </div>
        <div class="theOrderInderBoxSecond container">
          <div class="radioBox"></div>
          <p>{{orderItem.destinationAddress}}</p>
        </div>
      </div>
      <p>备注:备注内容</p>
      <van-divider style="background-color: black; margin: 0 auto; width: 80%;margin-bottom: 20px"></van-divider>

      <!--      这里设置距离的展示和右侧价格预估-->
      <div class="wrapper">
        <div class="item left">
          <van-icon name="location" />
          <span>距离您 <span style="color: blue">5.92</span>km</span>
        </div>
        <div class="item right">
          <van-icon name="cash-back-record" />
          <span>预估 <span style="color: red">{{orderItem.orderMoney}}</span>元</span>
        </div>
      </div>
      <van-button type="primary" class="checkButton" @click="onClickBou"  style=" background-color: #4ea9cb ;margin-top: 20px;">接单</van-button>
    </div>

<!--    预约单页面ui-->

    <div class="booking">
      <van-cell>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template icon>
          <van-icon name="todo-list-o" /><span style="font-size: 18px">预约单</span>
        </template>
      </van-cell>
      <van-divider style="background-color: black; margin: 0 auto; width: 80%;margin-bottom: 20px"></van-divider>
      <!--      用来装实时订单里面的两个div-->
      <div>
        <div class="theOrderInderBoxFirst container">
          <div class="radioBox"></div>
          <p>{{orderItem.startingPointAddress}}</p>
        </div>
        <div class="theOrderInderBoxSecond container">
          <div class="radioBox"></div>
          <p>{{orderItem.destinationAddress}}</p>
        </div>
      </div>
      <p>备注:备注内容</p>
      <van-divider style="background-color: black; margin: 0 auto; width: 80%;margin-bottom: 20px"></van-divider>

      <!--      这里设置距离的展示和右侧价格预估-->
      <div class="wrapper">
        <div class="item left">
          <van-icon name="location" />
          <span>距离您 <span style="color: blue">5.92</span>km</span>
        </div>
        <div class="item right">
          <van-icon name="cash-back-record" />
          <span>预估 <span style="color: red">33.81</span>元</span>
        </div>
      </div>
      <van-button type="primary" class="checkButton" @click="onClickBou"  style=" background-color: #4ea9cb ;margin-top: 20px;">接单</van-button>

    </div>
    <br>
    <br>
    <br>
    <br>


    <van-tabbar v-model="active">
      <van-tabbar-item class="bgso" @click="goLisen()">刷新</van-tabbar-item>
      <van-tabbar-item style="background-color: #4ea9cb">听单中...</van-tabbar-item>
      <van-tabbar-item style="background-color: #919191" @click="listenReset()">休息</van-tabbar-item>
    </van-tabbar>





  </div>
</template>

<script>
import {Dialog, Toast} from 'vant';
import {
  getOrderOneTimeItem,
  homePageGetOrder, theDriverClicksTakeOrder,
  updateOrderNum,
  updateTodayOrderStatus
} from "@/components/api/homepage/homePage.js";
export default {

  data() {
    return {
      todayId:"",
      driverId:1,
      active:"",
      orderItem:{},
      // 司机接单数据的统计
      form:{},
    };
  },
  created() {
    this.todayId = localStorage.getItem('todayId');
    this.driverId=this.$route.query.driverId;
    this.findDriverInfo();
    // 定时刷新订单信息
    this.findOrder();
    setInterval(() => {
      this.findOrder();
    }, 10000);



  },
  methods: {
    goLisen(){
      this.$router.push({
        path: '/GetOrder',
        params: {
          driverId:1
        }
      })
    },
    listenReset(){
    //   去修改当前司机的该行程的订单状态?行程id从哪来?
      this.todayId = localStorage.getItem('todayId');
        updateTodayOrderStatus(this.todayId,this.driverId).then(res=>{
          if(res.code==="200"){
            localStorage.removeItem('todayId');
          }

        })
      // 通过司机的id去赋值订单基本信息中的司机id和时间表中的截单时间
      updateTodayOrderStatus(this.todayId,this.driverId).then(res=>{
        console.log(res)
      })

      this.$router.push({
        path: '/homeIndex'
      })
    },
    // 查找截单数据
    findDriverInfo(){
      getOrderOneTimeItem(this.driverId).then(res=>{
        this.form=res.orderInformation

      })
    },
    // 顶部标签点击返回,返回首页
    onClickLeft(){
      this.$router.push("/homeIndex")
    },

    // 点击开始接单按钮的功能,提示是否接单
    onClickBou(){
      if(this.orderItem.id!=null){
        Dialog.confirm({
          title: '提醒',
          message: '请确认电量是否充足,足以完成订单,否则将产生违约金',

        })
            // 确认接单点击事件
            .then(() => {
              updateOrderNum(this.todayId,this.driverId).then(res=>{
                console.log(res)
              })
              theDriverClicksTakeOrder(this.todayId,this.driverId).then(res=>{
                console.log(res)
              })

              this.$router.push({
                path: '/ItineraryDetails',
                query: {
                  orderId: this.orderItem.id,
                }
              })
            })
            // 取消接单点击事件
            .catch(() => {
              // on cancel
              alert("取消接单")
            });
      }else {
        Toast("当前没有订单")
      }

    },
    // 跳转到找附近
    gonearby(){
      this.$router.push({
        path: '/nearby'
      })
    },
    // 寻找订单信息
    findOrder(){
        homePageGetOrder().then(res=>{
          if(res.msg=="未知异常，请联系管理员"){
            Toast("目前系统暂无订单,请耐心等待")
            this.orderItem=res.order;
          }
          this.orderItem=res.order;
        })
    },
    toHeatMap(){
      this.$router.push({
        path: '/heatMap'
      })
    },
  },
};
</script>
<style>
.booking{
  margin-top: 100px;
}
.bgso{
  background-color: orange;
  color: white;
}
.checkButton{

  width: 80%;
}
.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
}

.left {
  order: 1; /* 控制左侧元素在最左边 */
}

.right {
  order: 2; /* 控制右侧元素在最右边 */
}

img {
  width: 20px; /* 设置图标宽度 */
  height: 20px; /* 设置图标高度 */
  margin-right: 5px; /* 图标与文本间距 */
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.van-cell-top{
  line-height: 80px;
}
.theOrderInderBoxFirst{
  border-radius: 10px;
  height: 40px;
  width: 80%;
  margin-left: 10%;
  background-color: #edf6fa;
}
.theOrderInderBoxSecond{
  border-radius: 10px;
  height: 40px;
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
  background-color: #f4f4f4;
}
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}
.radioBox{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green ;
  margin-left: 40px;
  margin-right: 10px;
}

</style>
